import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';
import 'package:gourmet/utils/svg.dart';
import 'package:url_launcher/url_launcher.dart';

class HelpServiceController extends GetxController {
  final double navHeight = 44 + Get.mediaQuery.padding.top;

  RxBool showAccordion = RxBool(false);
}

class HelpServicePage extends GetView<HelpServiceController> {
  const HelpServicePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removeViewPadding(
      context: context,
      removeBottom: true,
      removeLeft: true,
      removeRight: true,
      removeTop: true,
      child: Scaffold(
        backgroundColor: HexColor(ColorsUtils.colorF7f7),
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(controller.navHeight),
          child: AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.dark,
            child: Container(
              color: Colors.white,
              height: controller.navHeight,
              padding: Get.mediaQuery.padding,
              child: Stack(
                children: [
                  Positioned(
                    width: 40,
                    height: 44,
                    top: 0,
                    left: 0,
                    child: Center(
                      child: Icon(
                        CupertinoIcons.chevron_back,
                        size: 20,
                        color: HexColor(ColorsUtils.color0000),
                      ),
                    ).onTap(Get.back),
                  ),
                  Center(
                    child: Text(
                      '帮助与客服',
                      softWrap: true,
                      style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize16,
                        fontWeight: FontWeight.w700,
                        color: ColorsUtils.color0000,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                margin: insets,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white,
                ),
                child: Column(
                  children: [
                    Container(
                      padding: const EdgeInsets.only(top: 15, bottom: 20),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '自助服务',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color0000,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      padding: const EdgeInsets.only(bottom: 20),
                      child: Wrap(
                        spacing: 10,
                        children: [
                          SizedBox(
                            width: 86,
                            child: Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u9126',
                                      width: 26, height: 26),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '意见反馈',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color0000,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ).onTap(() {
                            Get.toNamed(Routes.feedbackOpinion);
                          }),
                          SizedBox(
                            width: 86,
                            child: Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u9129',
                                      width: 28, height: 23),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '发票助手',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color0000,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ).onTap(() {
                            Get.toNamed(Routes.invoiceAssistant);
                          }),
                          SizedBox(
                            width: 86,
                            child: Column(
                              children: [
                                Center(
                                  child: SvgUtils.assetName('u9132',
                                      width: 28, height: 25),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '账号注销',
                                    style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color0000,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ).onTap(() {
                            Get.toNamed(Routes.mineCancelAccount);
                          }),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Container(
                margin: insets,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white,
                ),
                child: Column(
                  children: [
                    Container(
                      height: 50,
                      alignment: Alignment.centerLeft,
                      padding: const EdgeInsets.symmetric(horizontal: 15),
                      child: Text(
                        '常见问题',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize15,
                          color: ColorsUtils.color0000,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ),
                    Obx(
                      () => GFAccordion(
                        showAccordion: controller.showAccordion.value,
                        onToggleCollapsed: (bool show) {
                          controller.showAccordion.value = show;
                        },
                        collapsedIcon: Icon(
                          Icons.keyboard_arrow_down,
                          color: HexColor(ColorsUtils.color0000),
                          size: 20,
                        ),
                        expandedIcon: Icon(
                          Icons.keyboard_arrow_up,
                          color: HexColor(ColorsUtils.color0000),
                          size: 20,
                        ),
                        titleChild: Container(
                          height: 50,
                          // padding: const EdgeInsets.symmetric(horizontal: 15),
                          decoration: BoxDecoration(
                            border: Border(
                              bottom: BorderSide(
                                  color: HexColor(ColorsUtils.colorF5f5),
                                  width: 1),
                            ),
                          ),
                          child: Text(
                            '账号',
                            style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color0000,
                              fontSize: StylesUtils.fontSize16,
                            ),
                          ),
                        ),
                        expandedTitleBackgroundColor: Colors.transparent,
                        collapsedTitleBackgroundColor: Colors.transparent,
                        titlePadding:
                            const EdgeInsets.symmetric(horizontal: 15),
                        contentBackgroundColor: Colors.transparent,
                        contentPadding: const EdgeInsets.symmetric(
                            vertical: 10, horizontal: 15),
                        contentChild: Column(
                          children: [
                            Container(
                              padding: const EdgeInsets.only(top: 10),
                              alignment: Alignment.centerLeft,
                              child: Text.rich(
                                TextSpan(
                                  children: [
                                    WidgetSpan(
                                        child: Icon(
                                          CupertinoIcons
                                              .exclamationmark_circle_fill,
                                          size: 15,
                                          color:
                                              HexColor(ColorsUtils.color7979),
                                        ),
                                        alignment: PlaceholderAlignment.middle),
                                    TextSpan(
                                      text: ' 如何认证',
                                      style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize15,
                                        color: ColorsUtils.color0000,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.symmetric(vertical: 15),
                              child: Column(
                                children: [
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '方法：点击个人中心_身份认证，填写信息进行认证提交，提交后等待审核',
                                      style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color7979,
                                        lineHeight: 1.4,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 10),
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '审核时效：工作时间（9:00-18:30）正常24小时内审核完毕',
                                      style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color7979,
                                        lineHeight: 1.4,
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Text.rich(
                                TextSpan(
                                  children: [
                                    WidgetSpan(
                                        child: Icon(
                                          CupertinoIcons
                                              .exclamationmark_circle_fill,
                                          size: 15,
                                          color:
                                              HexColor(ColorsUtils.color7979),
                                        ),
                                        alignment: PlaceholderAlignment.middle),
                                    TextSpan(
                                      text: ' 修改登录密码',
                                      style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize15,
                                        color: ColorsUtils.color0000,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.symmetric(vertical: 15),
                              child: Column(
                                children: [
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '点击我的_头像_修改登录密码，输入旧密码与新密码即可。',
                                      style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color7979,
                                        lineHeight: 1.4,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                        margin: EdgeInsets.zero,
                      ),
                    ),
                    Container(
                      height: 50,
                      padding: const EdgeInsets.symmetric(horizontal: 15),
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(
                              color: HexColor(ColorsUtils.colorF5f5), width: 1),
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '账户',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize16,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                          Icon(
                            Icons.keyboard_arrow_down,
                            color: HexColor(ColorsUtils.color0000),
                            size: 20,
                          ),
                        ],
                      ),
                    ),
                    Container(
                      height: 50,
                      padding: const EdgeInsets.symmetric(horizontal: 15),
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(
                              color: HexColor(ColorsUtils.colorF5f5), width: 1),
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '订单',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize16,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                          Icon(
                            Icons.keyboard_arrow_down,
                            color: HexColor(ColorsUtils.color0000),
                            size: 20,
                          ),
                        ],
                      ),
                    ),
                    Container(
                      height: 50,
                      padding: const EdgeInsets.symmetric(horizontal: 15),
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(
                              color: HexColor(ColorsUtils.colorF5f5), width: 1),
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '银行卡',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize16,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                          Icon(
                            Icons.keyboard_arrow_down,
                            color: HexColor(ColorsUtils.color0000),
                            size: 20,
                          ),
                        ],
                      ),
                    ),
                    Container(
                      height: 50,
                      padding: const EdgeInsets.symmetric(horizontal: 15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '举报商家',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize16,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                          Icon(
                            Icons.keyboard_arrow_down,
                            color: HexColor(ColorsUtils.color0000),
                            size: 20,
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
        bottomNavigationBar: SafeArea(
          bottom: true,
          child: Container(
            color: Colors.white,
            height: 60,
            child: Row(
              children: [
                SizedBox(
                  width: 90,
                  height: 60,
                  child: Column(
                    children: [
                      Container(
                        margin: const EdgeInsets.only(top: 10),
                        child:
                            SvgUtils.assetName('u9121', width: 20, height: 19),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 8),
                        alignment: Alignment.center,
                        child: Text(
                          '电话客服',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color0000,
                            fontSize: StylesUtils.fontSize13,
                          ),
                        ),
                      )
                    ],
                  ),
                ).onTap(() {
                  callMoblie(context);
                }),
                Expanded(
                  child: Center(
                    child: Container(
                      alignment: Alignment.center,
                      constraints:
                          const BoxConstraints.expand(width: 270, height: 45),
                      decoration: BoxDecoration(
                        //linear-gradient(90deg, rgba(255, 153, 0, 1) 0%, rgba(255, 153, 0, 1) 0%, rgba(254, 70, 1, 1) 100%, rgba(254, 70, 1, 1) 100%)
                        gradient: LinearGradient(
                          colors: [
                            ColorsUtils.rgba(255, 153, 0, 1),
                            ColorsUtils.rgba(255, 153, 0, 1),
                            ColorsUtils.rgba(254, 70, 1, 1),
                            ColorsUtils.rgba(254, 70, 1, 1),
                          ],
                          stops: const [0, 0, 1.0, 1.0],
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          transform: GradientRotation(
                            RadianUtils.angleToRadian(90),
                          ),
                        ),
                        borderRadius: BorderRadius.circular(23),
                      ),
                      child: Text(
                        '在线客服',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize16,
                        ),
                      ).onTap(() {
                        Get.toNamed(Routes.helpChat);
                      }),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  void callMoblie(BuildContext context) {
    final child = Center(
      child: Container(
        constraints: const BoxConstraints.expand(width: 280, height: 135),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.only(top: 20),
              child: Text(
                '呼叫客服 (9:00-21:00)',
                style: StylesUtils.customTextStyle(
                  fontSize: StylesUtils.fontSize18,
                  color: ColorsUtils.color0000,
                ),
              ),
            ),
            Expanded(
              child: Center(
                child: Text(
                  '400123456789',
                  style: StylesUtils.customTextStyle(
                    color: ColorsUtils.color5151,
                    fontSize: StylesUtils.fontSize15,
                  ),
                ),
              ),
            ),
            Container(
              height: 50,
              decoration: BoxDecoration(
                border: Border(
                  top: BorderSide(
                    color: HexColor(ColorsUtils.colorF2f2),
                    width: 1,
                  ),
                ),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: Center(
                      child: Text(
                        '取消',
                        style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color0000,
                          fontSize: StylesUtils.fontSize16,
                        ),
                      ),
                    ).onTap(Get.back),
                  ),
                  Expanded(
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        border: Border(
                          left: BorderSide(
                            color: HexColor(ColorsUtils.colorF2f2),
                            width: 1,
                          ),
                        ),
                      ),
                      child: Text(
                        '确定',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize16,
                          color: ColorsUtils.colorFf64,
                        ),
                      ),
                    ).onTap(() {
                      Get.back();
                      Get.engine.addPostFrameCallback((_) {
                        _makePhoneCall('400123456789');
                      });
                    }),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
    showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: 'show-dialog',
      barrierColor: ColorsUtils.rgba(0, 0, 0, 0.298039215686275),
      pageBuilder: (BuildContext buildContext, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        return Dialog(
          child: child,
        );
      },
      transitionBuilder: _buildMaterialDialogTransitions,
      transitionDuration: const Duration(milliseconds: 150),
    );
  }

  Future<void> _makePhoneCall(String phoneNumber) async {
    final Uri launchUri = Uri(
      scheme: 'tel',
      path: phoneNumber,
    );
    await launchUrl(launchUri);
  }

  Widget _buildMaterialDialogTransitions(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    // 使用缩放动画
    return ScaleTransition(
      scale: CurvedAnimation(
        parent: animation,
        curve: Curves.linear,
      ),
      child: child,
    );
  }

  EdgeInsets get insets {
    return EdgeInsets.only(
        left: (Get.width - 345) / 2, right: (Get.width - 345) / 2, top: 10);
  }
}
